<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#header{
			width: 100%;
			height: 60px;
			background: rgb(100,100,100);
			position: relative;
		}
		#header>p{
			display: inline-block;
			color: white;
			line-height: 60px;
			position: absolute;
			left: 150px;
			font-size: 20px;
		}
		#header #zc1{
			width: 80px;
			height: 40px;
			text-align: center;
			background: skyblue;
			color: white;
			position: absolute;
			right: 160px;
			bottom: 10px;
			border: none;
		}
		#header #dl1{
		width: 80px;
		height: 40px;
		text-align: center;
		background: skyblue;
		color: white;
		position: absolute;
		right: 50px;
		bottom: 10px;
		border: none;
		}	
		#header img{
			width: 50px;
			height: 50px;
			position: absolute;
			top: 5px;
			right: 80px;
			display: none;
		}
		#header #wrap{
			width: 100px;
			height: 100px;
			position: absolute;
			top: 60px;
			right:30px;
			display: none;
		}
		#box1{
			display: none;
		}
		#box2{
			display: none;
		}
		.box{
				width:400px;
				height: 230px;
				margin: 100px auto;
				background: rgb(100,100,100);
				position: relative;
			}
		.box2 h1{
				color: gray;
				margin-top: 10px;
				margin-left: 10px;
			}
		.box ul{
					width: 350px;
					list-style: none;
					font-size: 16px;
					margin-top: 10px;
					margin-left: 20px;
				}
		.box span{
					display: inline-block;
					text-align: right;
					width: 80px;
				}
		.box li{
				height: 40px;
				line-height: 40px;
			}
		.box input{
					height: 30px;
					width: 200px;
					margin-left: 20px;
				}
		#zc2,#dl2{
				width: 80px;
				height: 40px;
				text-align: center;
				background: skyblue;
				color: white;
				position: absolute;
				left: 160px;
				bottom: 10px;
				border: none;
			}
		</style>
	</head>
	<body>
	<div id="header">
		<p>china -Pub 后台管理系统</p>
		<input type="button" name="zc1" id="zc1" value="注册" />
		<input type="button" name="dl1" id="dl1" value="登录" />
		<img src="../img/user.png"/>
		<div id="wrap">
			<p></p>
			<input type="button" name="" id="" value="注销" />
		</div>
	</div>
<!--注册-->
	<div class="box" id="box1">
			<h1>Login</h1>
			<ul>
				<li><span>管理员：</span><input type="text" name="username1" id="username1" value="" /></li>
				<li><span>密码：</span><input type="text" name="password1" id="password1" value="" /></li>
			</ul>
			<button id="zc2">注册</button>
	</div>
<!--登录-->
	<div class="box" id="box2">
			<h1>Login</h1>
			<ul>
				<li><span>管理员：</span><input type="text" name="username2" id="username2" value="" /></li>
				<li><span>密码：</span><input type="text" name="password2" id="password2" value="" /></li>
			</ul>
			<button id="dl2">登录</button>
	</div>
	
	</body>
	<script src="../js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//	点击注册按钮:
	$("#zc1").click(function(){
		$("#box1").show();
	})
//	注册成功:
	$("#zc2").click(function(){
		var xinxi={
			username:$("#username1").val(),
			password:$("#password1").val()
		}
		$.post("http://localhost:2403/users",xinxi,function(data){
			if(data.username!=""){
				localStorage.setItem("username2",data.username)
				alert("注册成功");
				$("#box1").hide();	
			}
		})
//		$.ajax({
//			url:"http://localhost:2403/users/",
//			type:"POST",
//			data:{username:$("#username2").val(),password:$("#password2").val()},
//			success:function(data){
//				if(data.username!=""){
//					alert("注册成功"),
//					$("#box1").hide();
//				}
//			}
//		})
	})
//	点击登录按钮:
	$("#dl1").click(function(){
		$("#box2").show();
	})
//	登录成功:
	$("#dl2").click(function(){
		$.ajax({
			url:"http://localhost:2403/users/login",
			type:"POST",
			data:{username:$("#username2").val(),password:$("#password2").val()},
			success:function(data){
				if(data.uid){
					alert("登陆成功"),
					$("#dl1").hide()
					$("#zc1").hide()
					$("#box2").hide();
					$("#header img").show();
					yonghu();
					location.href = "tushu.html";
					}else{ 
						alert("用户不存在")
					}
				}
//			error:function(xhr){
//				console.log(xhr.responseText)
//			}
		})
	})
	
	function yonghu(){
		$("#header img").click(function(){
				$("#wrap").show();
				var names = localStorage.getItem("username2");
				$("#wrap p").html("管理员:"+names);
			})
	}
	
	

	
	</script>
	
</html>
